<template>
	<view class="mainquestion-page">
		<view class="mainquestion-page-header">
			<view class="content-header-nav" :style="bgColor?`background-color:${bgColor}`:''">
				<view class="content-header-nav-top" :style="gps?`height:${gps+'px'}`:``"></view>
				<view class="content-header-nav-bottom">
					<img :src="queryIconImage(`searchbtn`)" mode="aspectFill" alt="" class="header-left-img"
						@click="goindexseach" />
				</view>

			</view>
			<view class="page-header-backimg">
				<img :src="imgList[0]?.img.url" alt="" style="width: 100%; height: 100%;">
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="page-header-backimgtwo" :style="gps?`top:${gps+30+'px'}`:``">
				<img :src="imgList[1]?.img.url" alt="" style="width: 100%; height: 100%;">
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="page-header-backimgtwoh" :style="gps?`top:${gps+30+'px'}`:``">
				<img :src="imgList[1]?.img.url" alt="" style="width: 100%; height: 100%;">
			</view>
			<!-- #endif -->
			<!-- 推介答主部分 -->
			<view class="page-header-introduction">
				<view class="introduction-list" v-for="(item,index) in introductionlist" :key="item.id"
					:style="index==0?'position: absolute;left: 50%;transform: translateX(-50%);z-index: 99;':''"
					@click="goanswerdetails(item.id)">
					<view class="introduction-list-contetn" v-if="item.id">
						<view class="list-contetn-img"
							:style="index==1?'border: 1px solid #9BABEB;':index==2?'border: 1px solid #E2763F;':''">
							<img :src="item?.avatar?.url" alt=""
								style="width: 100%;height: 100%;border-radius: 100rpx;">
							<img :src="index==0 ? queryIconImage(`hat2`):index==1 ? queryIconImage(`hat`) : queryIconImage(`hat3`)"
								alt="" class="postionimg">
						</view>
						<view class="list-contetn-name">
							<span>{{item.nickname}}</span>
							<img :src="queryImage(`cardlogo1`)" alt=""
								style="width: 30rpx;height: 30rpx;margin-left: 10rpx">
						</view>
						<view class="list-contetn-bottom">
							<span>{{item?.commentList?.length}}回答</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainquestion-page-content">
			<view class="page-content-body">
				<view class="apply-top" @click="goapply" v-if="AnswerLord">
					<img :src="queryIconImage(`applylogo1`)" alt=""
						style="width: 40rpx;height: 40rpx;margin-right: 10rpx;">
					<span>申请成为答主</span>
				</view>
				<!-- 博主列表 -->
				<view class="content-body-list">
					<view class="body-list-mode" v-for="(item,inde) in questionCardlist" :key="item.id"
						@click="goanswerdetails(item.id)">
						<!-- 左边 -->
						<view class="list-mode-left">
							<!-- 左上 -->
							<view class="mode-left-top">
								<!-- 左上左 -->
								<view class="left-top-left">
									<img :src="item?.avatar?.url" alt=""
										style="width: 60rpx;height: 60rpx;border-radius: 60rpx;">
								</view>
								<!-- 左上右 -->
								<view class="left-top-right">
									<view class="top-right-title">
										<span
											style="width: 150rpx; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{item.nickname}}</span>
										<view class="right-title-right">
											<uni-rate :readonly="true" :size="18"
												:value="item?.article_comment_score_aggregate?.aggregate?.avg?.score"
												:allowHalf="true" />
											<span
												class="content-score-text">{{ item?.article_comment_score_aggregate?.aggregate?.avg?.score }}</span>
										</view>

									</view>
									<view class="top-right-bottom">
										<span class="right-bttom-title">
											专业标签:&nbsp;
										</span>
										<view class="right-bttom-right">
											<span class="bttom-right-text" v-for="(v,i) in item.tag_list"
												:key="v">{{v.label}}</span>
										</view>
									</view>
								</view>
							</view>
							<!-- 左下 -->
							<view class="mode-left-bottom">
								<span class="mode-left-bottomtitle">30天获赞{{ item?.zanlinkNum || 0}}</span>
								<span class="mode-left-bottomtitle"
									style="background: #999999;color: #fff;">{{item?.commentList?.length}}回答</span>
							</view>

						</view>
						<!-- 右边 -->
						<view class="list-mode-right" @click.stop="goquestion(item)">
							<span>提问</span>
						</view>
					</view>
				</view>
				<!-- 加载更多 -->
				<view class="content-body-bottom">
					<span>{{bottontext}}</span>
				</view>
			</view>
		</view>
		<u-popup :safeAreaInsetBottom="false" mode="center" :disabled="true" :round="20" :show="show" @close="close"
			@open="open">
			<view class="popularlogin">
				<img :src="queryIconImage(`weixinlogo1`)" alt="" style="width: 60rpx;height: 60rpx;">
				<p class="popularlogin-text">登录后查看</p>
				<view class="popularlogin-btn">
					<view class="popularlogin-btn-left" @click="loginsubmit">
						<span>授权登录</span>
					</view>
					<view class="popularlogin-btn-left" style="background: #999999;" @click="cancellationbtn">
						<span>取消</span>
					</view>
				</view>
			</view>
		</u-popup>
		<my-tabbar :selected="selected"></my-tabbar>
	</view>
</template>

<script>
	// import methods from "./methods.js"
	import {
		mapState
	} from 'vuex'
	import methods from "@/pages/index/methods.js"
	import MyTabbartwo from '@/components/my-tabbar/my-tabbar.vue';
	import mynavBar from '../../components/mynavBar/mynavBar.vue'
	export default {
		components: {
			mynavBar,
			MyTabbartwo
		},

		data() {
			return {
				//是否成为答主
				AnswerLord: true,
				thirtyDaysAgoTimeStamp: '',
				bottontext: '上滑加载更多内容 ↑',
				colorblean: true,
				imgList: [],
				introductionlist: [],
				selected: 2,
				questionCardlist: [],
				gps: '',
				title: '答主',
				navheight: "80rpx",
				bgColor: 'rgba(165, 42, 42, 0)',
				tokenbleam: false,
				show: false,
				isOffset: false, //是否分页
				offset: 1, //页数
				limit: 20, //条数
				pages: 0, //总条数
			};
		},
		onReachBottom() {
			if (this.offset * this.limit >= this.pages) return
			this.isOffset = true
			this.bottontext = '-----加载中-----'
			this.offset = ++this.offset
			setTimeout(() => {
				this.getData()
				if (this.offset * this.limit >= this.pages) this.bottontext = '-----没有更多-----';
				else this.bottontext = '-----加载中-----';
			}, 1000)
		},

		onLoad() {

			let currentTimeStamp = Date.now();
			// 计算30天前的时间戳
			this.thirtyDaysAgoTimeStamp = currentTimeStamp - (30 * 24 * 60 * 60 * 1000);
			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top
			// console.log("胶囊位置信息", arr);
			//#endif
			if (!uni.getStorageSync('userInfo').id) {
				this.show = true
			}
			this.$store.dispatch("remote/query", {
				model: 'user',
				limit: -1,
				where: {
					id: {
						_eq: uni.getStorageSync('userInfo').id
					}
				},
				field_string: 'id nickname is_answer',

			}).then(res => {
				console.log("测试故据-user表", res);
				if (uni.getStorageSync('userInfo').id == res.data.id) {
					if (res.data.is_answer == "已通过") {
						this.AnswerLord = false
					}
				}
			})
			this.getData()
			this.getImg()
			// console.log("3333",uni.getStorageSync('userInfo').id);


		},
		computed: {
			...mapState({
				user: state => state.user?.data ?? {},
				headericon: state => state.remote?.headericon?.data_list ?? [],
				iconList: state => state.remote?.iconList?.data_list ?? [],
			})
		},
		mounted() {
			this.querySections()
			this.$store.dispatch("user/getUserByToken")
		},
		methods: {
			...methods,
			queryImage(label, key = "headericon") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			queryIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			goquestion(vals) {
				this.stri = JSON.stringify(vals)
				getApp().val = this.stri
				uni.switchTab({
					url: `/pages/question/question`
				})
			},
			goanswerdetails(id) {
				uni.navigateTo({
					url: `/pages_a/answerdetails/answerdetails?id=${id}`
				})
			},
			goindexseach() {
				uni.navigateTo({
					url: `/pages_a/indexsearch/indexsearch?type=user`
				})
			},
			getData() {
				this.$store.dispatch('remote/callActionflowOffset', {
					response_key: "getAnswerInfo",
					actionflow_name: "用户_答主信息",
					isOffset: this.isOffset,
					key: "list",
					isother: true,
					payload: {
						offset: this.offset,
						limit: this.limit,
					},
				}).then(res => {
					this.pages = res.data_other.pages
					let list = JSON.parse(JSON.stringify(res.data_list))
					let time = Math.round(new Date())
					let zanlinkNum = 0
					list.map(item => {
						item.tag_list = JSON.parse(item.tag_list)
						item.zanlinkList.map(eitem => {
							if (Math.abs(time - new Date(this.$utils.dateFormat(eitem.updated_at,
									"yyyy-MM-dd")) <= (30 * 24 * 60 * 60 * 1000))) {
								if (eitem.zanlink) {
									zanlinkNum = zanlinkNum + eitem.zanlink
									item[`zanlinkNum`] = zanlinkNum
								}
							}
						})
					})
					if (res.data_list.length >= 3) {
						this.questionCardlist = list.slice(3)
						this.introductionlist = list.slice(0, 3)
					} else {
						this.introductionlist = list
					}
				}).catch(err => {
					console.log('失败了,,,')
				})
			},
			getImg() {
				this.$store.dispatch("remote/query", {
					model: "image",
					order_by: {
						id: 'asc'
					},
					where: {
						name: {
							_eq: '答主页面'
						}
					},
					field_string: 'id name img{url}'
				}).then(res => {
					this.imgList = JSON.parse(JSON.stringify(res.data_list))
				})
			},
			loginsubmit() {
				uni.navigateTo({
					url: `/pages/login/login?url=${'/pages/mainquestionlist/mainquestionlist'}`
				})
				this.show = false
			},
			cancellationbtn() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goapply() {
				//判断是否是答主
				if (this.user.is_answer == "申请中") {
					uni.showToast({
						icon: "none",
						title: "您已经申请，等待成为答主"
					})
				} else {
					uni.navigateTo({
						url: "/pages_a/applyquestion/applyquestion"
					})
				}
			},
		},
		onPageScroll(e) {
			//获取距离顶部距离
			const scrollTop = e.scrollTop;
			// console.log("高度：", scrollTop)
			// 根据高度改变样式
			if (scrollTop < 99) {
				this.bgColor = 'rgba(247, 247, 247, 0)'

			} else if (scrollTop >= 99 && scrollTop < 150) {
				this.bgColor = 'rgba(247, 247, 247, 0.5)'
			} else if (scrollTop >= 150) {
				this.bgColor = 'rgba(247, 247, 247, 1)'
			}
		},
	}
</script>

<style lang="scss" scoped>
	.mainquestion-page {
		width: 100%;
		background-color: #f4f4f4;
		min-height: 100vh;
		box-sizing: border-box;

		.mainquestion-page-header {
			width: 100%;
			height: 790rpx;
			position: relative;

			.page-header-backimg {
				width: 100%;
				height: 100%;
				z-index: 5;
			}

			.page-header-backimgtwo {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width: 260rpx;
				height: 260rpx;
				z-index: 9;

			}

			.page-header-backimgtwoh {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width: 260rpx;
				height: 260rpx;
				z-index: 9;
				top: 20%;

			}

			.page-header-introduction {
				width: 90%;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				height: 260rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				bottom: 240rpx;

				.introduction-list {
					width: 260rpx;
					background: rgba(255, 230, 184, 0.4);
					opacity: 1;
					height: 260rpx;

					background-blend-mode: lighten;
					backdrop-filter: blur(8px);
					border-radius: 20rpx;
					box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
					border-image: linear-gradient(225deg, rgba(237, 237, 237, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%) 2;


					.introduction-list-contetn {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						box-sizing: border-box;
						padding-top: 40rpx;


						// background-color: red;
						.list-contetn-img {
							border: 1px solid #EE990F;
							width: 100rpx;
							height: 100rpx;
							border-radius: 100rpx;
							position: relative;

							.postionimg {
								width: 25rpx;
								height: 23rpx;
								position: absolute;
								left: 50%;
								top: 0;
								transform: translate(-50%, -100%);
							}
						}

						.list-contetn-name {
							width: 100%;
							height: 40rpx;
							font-size: 24rpx;
							font-weight: bold;
							// line-height: 42rpx;
							letter-spacing: 0em;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 10rpx;
							color: #3D3D3D;
						}

						.list-contetn-bottom {
							width: 105rpx;
							height: 30rpx;
							border-radius: 10rpx;
							opacity: 1;
							margin: 0 auto;
							background: #999999;
							font-family: Source Han Sans CN;
							font-size: 18rpx;
							font-weight: 500;
							line-height: 30rpx;
							letter-spacing: 0em;
							text-align: center;
							color: #FFFFFF;
						}
					}
				}

				.introduction-list:nth-child(3) {
					width: 240rpx;
					height: 240rpx;
					background-color: #fff
				}

				.introduction-list:nth-child(2) {
					width: 240rpx;
					height: 240rpx;
					background: rgba(75, 118, 73, 0.3);

				}
			}

			.content-header-nav {
				width: 100%;
				height: 170rpx;
				background-color: rgba(247, 247, 247, 0);
				position: fixed;
				z-index: 999989;

				.content-header-nav-bottom {
					width: 100%;
					height: 32px;
					display: flex;
					align-items: center;
					padding-left: 30rpx;
					position: absolute;

					.header-left-img {
						width: 150rpx;
						height: 60rpx;
					}

					.header-right-img {
						width: 135rpx;
						height: 64rpx;
						position: fixed;
						left: 50%;
						transform: translateX(-50%);
					}
				}

			}


			.page-header-img {
				width: 100%;
				height: 343rpx;
			}
		}

		.popularlogin {
			width: 595rpx;
			height: 370rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 20rpx 0 40rpx 0;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.popularlogin-text {
				font-size: 32rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.8);
				line-height: 40rpx;
				margin: 12rpx 0 128rpx 0
			}

			.popularlogin-btn {
				display: flex;
				justify-content: space-between;
				width: 100%;
				box-sizing: border-box;
				padding: 0 65rpx;

				.popularlogin-btn-left {
					width: 215rpx;
					height: 70rpx;
					background: #26C789;
					border-radius: 80rpx 80rpx 80rpx 80rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #FFFFFF;
					line-height: 70rpx;
				}
			}
		}

		.mainquestion-page-content {
			width: 100%;
			border: none;
			min-height: 1400rpx;
			z-index: 10;
			background: linear-gradient(180deg, #FFE6B8 0%, #F09500 109%);

			.page-content-body {
				padding: 0 27rpx;
				box-sizing: border-box;
				width: 100%;
				min-height: 1400rpx;
				background: linear-gradient(180deg, #FFE6B8 0%, #F09500 109%);
				box-shadow: 0px -4px 10px 0px #EBA72B;
				border-top-left-radius: 40rpx;
				border-top-right-radius: 40rpx;
				position: relative;
				top: -40rpx;
				padding-top: 20rpx;
				padding-bottom: 120rpx;
				display: flex;
				flex-direction: column;

				.apply-top {
					margin: 0 auto;
					width: 555rpx;
					height: 60rpx;
					border-radius: 50rpx;
					opacity: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: YouSheBiaoTiHei;
					font-size: 36rpx;
					font-weight: 700;
					letter-spacing: 0em;
					color: #4B7649;
					background: #FFFFFF;
					margin-bottom: 10rpx;
				}

				.content-body-list {
					width: 100%;
					flex: 1;

					.body-list-mode {
						width: 100%;
						height: 140rpx;
						border-radius: 15px;
						opacity: 1;
						margin-top: 20rpx;
						background: #FFFFFF;
						box-sizing: border-box;
						padding: 20rpx 26rpx 20rpx 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.list-mode-left {
							width: 65%;

							.mode-left-top {
								width: 100%;
								display: flex;
								height: 60rpx;
								margin-bottom: 10rpx;

								.left-top-left {
									width: 60rpx;
									height: 60rpx;
									border-radius: 60rpx;
									margin-right: 27rpx;
								}

								.left-top-right {
									flex: 1;

									.top-right-title {
										font-family: Source Han Sans CN;
										font-size: 24rpx;
										font-weight: 500;
										line-height: 30rpx;
										letter-spacing: 0px;

										color: #333333;
										width: 100%;
										display: flex;
										justify-content: space-between;
										align-items: center;

										.right-title-right {
											display: flex;
											align-items: center;

											.content-score-text {
												font-family: Source Han Sans CN;
												font-size: 18rpx;
												font-weight: 500;
												line-height: 30rpx;
												letter-spacing: 0em;
												margin-left: 10rpx;
												color: #5F5F5F;
											}
										}

									}

									.top-right-bottom {
										width: 100%;
										display: flex;


										.right-bttom-title {
											width: 30%;
											font-family: Source Han Sans CN;
											font-size: 18rpx;
											font-weight: 500;
											line-height: 30rpx;
											letter-spacing: 0em;
											color: #999999;
										}

										.right-bttom-right {
											overflow: hidden; // 溢出隐藏
											text-overflow: ellipsis; // 溢出用省略号显示
											white-space: nowrap;
											font-family: Source Han Sans CN;
											font-size: 18rpx;
											font-weight: 500;
											line-height: 30rpx;
											letter-spacing: 0em;
											text-decoration: underline;
											color: #F09500;

											.bttom-right-text {
												margin-right: 15rpx;
											}
										}
									}
								}
							}

							.mode-left-bottom {
								width: 100%;
								display: flex;


								.mode-left-bottomtitle {
									display: inline-block;
									margin-right: 20rpx;
									padding: 0 29rpx;
									height: 30rpx;
									border-radius: 10rpx;
									opacity: 1;
									font-family: Source Han Sans CN;
									font-size: 18rpx;
									font-weight: 500;
									line-height: 30rpx;
									letter-spacing: 0em;
									color: #F09500;
									background: #FFE6B8;
								}

							}

						}

						.list-mode-right {
							width: 160rpx;
							height: 60rpx;
							border-radius: 50rpx;
							opacity: 1;
							text-align: center;
							background: #F09500;
							font-family: Source Han Sans CN;
							font-size: 30rpx;
							font-weight: bold;
							line-height: 60rpx;
							letter-spacing: -0.6px;
							color: #FFFFFF;
						}
					}
				}

				.content-body-bottom {
					text-align: center;
					font-family: Alibaba PuHuiTi 2.0;
					font-size: 30rpx;
					font-weight: normal;
					line-height: 42rpx;
					letter-spacing: 0px;

					color: #FFFFFF;
				}
			}
		}
	}
</style>